<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <div id="app">
      <table class="table table-dark" v-if="books.length">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">书籍名称</th>
            <th scope="col">出版日期</th>
            <th scope="col">价格 (方法1)</th>
            <th scope="col">价格 （方法2）</th>
            <th scope="col">购买数量</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in books">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date}}</td>
            <td>{{getFinalPrice(item.price)}}</td>
            <td>{{item.price | showPrice}}</td>

            <td>
              <button
                type="button"
                class="btn btn-danger"
                @click="decrease(index)"
                :disabled="item.count<=1"
              >
                -</button
              >{{item.count}}<button
                type="button"
                class="btn btn-success"
                @click="increase(index)"
              >
                +
              </button>
            </td>

            <td>
              <button
                type="button"
                class="btn btn-primary"
                @click="remove(index)"
              >
                删除
              </button>
            </td>
          </tr>
          <tr>
            <td>总价：</td>
            <td>{{getTotalPrice| showPrice}}</td>
          </tr>
        </tbody>
      </table>
      <h2 v-else>购物车为空</h2>
    </div>

    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          books: [
            { id: 1, name: 'c#语言学习', price: 100, date: '2006-9', count: 1 },
            { id: 2, name: 'pasical', price: 10, date: '2010-9', count: 1 },
            { id: 3, name: '北京折叠', price: 50, date: '2018-3', count: 1 },
            {
              id: 4,
              name: '钢铁是怎样炼成的',
              price: 1000,
              date: '2006-9',
              count: 1
            }
          ]
        },
        methods: {
          // 方法1：方法函数   格式化价格，小数点后保留两位
          getFinalPrice(price) {
            return '¥' + price.toFixed(2)
          },
          //增加按钮
          increase(index) {
            console.log('+' + index)
            console.log(this.books[index].count)
            this.books[index].count++
          },
          //减少按钮
          decrease(index) {
            console.log('-' + index)
            this.books[index].count--
          },
          //减少按钮
          remove(index) {
            console.log('del' + index)
            //splice()恐怕要算最强大的数组方法了，他的用法有很多种，在此只介绍删除数组元素的方法。
            //在删除数组元素的时候，它可以删除任意数量的项，
            //只需要指定2个参数：要删除的第一项的位置和要删除的项数，例如splice(0, 2)会删除数组中的前两项。
            this.books.splice(index, 1)
          }
        },
        filters: {
          // 方法2：过滤器   格式化价格，小数点后保留两位
          showPrice(price) {
            return '¥' + price.toFixed(2)
          }
        },
        computed: {
          //计算属性
          getTotalPrice() {
            let totaolprice = 0

            // 方法1 传统方法遍历循环
            for (let i = 0; i < this.books.length; i++) {
              totaolprice =
                totaolprice + this.books[i].price * this.books[i].count
            }

            //方法2 高阶函数 reduce
            this.books.reduce(function(price, book) {
              return book.price * book.count + totaolprice
            }, 0)
            return totaolprice
          }
        }
      })
    </script>
  </body>
</html>
